<script lang="ts" setup>
import { onMounted, ref } from 'vue'

import { _artistList } from '@/service/singer'
import { generateUpperCaseArray } from '@/utils/format'
const areas = ref([
  {
    label: '全部',
    value: -1
  },
  {
    label: '华语',
    value: 7
  },
  {
    label: '欧美',
    value: 96
  },
  {
    label: '日本',
    value: 8
  },
  {
    label: '韩国',
    value: 16
  },
  {
    label: '其他',
    value: 0
  }
])
const types = ref([
  {
    label: '全部',
    value: -1
  },
  {
    label: '男歌手',
    value: 1
  },
  {
    label: '女歌手',
    value: 2
  },
  {
    label: '乐队',
    value: 3
  }
])
const filters = ref<string[]>(generateUpperCaseArray())
const area = ref(-1)
const type = ref(-1)
const initial = ref<number | string>(-1)
const offset = ref(0)
onMounted(() => {
  getArtists()
})
const getArtists = () => {
  const params = {
    area: area.value,
    type: type.value,
    initial: initial.value,
    offset: offset.value * 30
  }
  _artistList(params).then((res) => {})
}

const changeFilter = (name: string, value: number | string) => {
  if (name === 'area' && typeof value === 'number') {
    area.value = value
  } else if (name === 'type' && typeof value === 'number') {
    type.value = value
  } else {
    initial.value = value
  }
  getArtists()
}
</script>

<template>
  <div>
    <div class="tags_container">
      <div class="tags_box">
        <div class="tag_title">语种：</div>
        <div class="tag_items">
          <template v-for="item in areas" :key="item.value">
            <span
              class="tag_item"
              :class="{ 'is-active': item.value === area }"
              @click="changeFilter('area', item.value)"
              >{{ item.label }}</span
            >
          </template>
        </div>
      </div>
      <div class="tags_box">
        <div class="tag_title">分类：</div>
        <div class="tag_items">
          <template v-for="item in types" :key="item.value">
            <span
              class="tag_item"
              :class="{ 'is-active': item.value === type }"
              @click="changeFilter('type', item.value)"
              >{{ item.label }}</span
            >
          </template>
        </div>
      </div>
      <div class="tags_box">
        <div class="tag_title">筛选：</div>
        <div class="tag_items">
          <span
            class="tag_item"
            :class="{ 'is-active': -1 === initial }"
            @click="changeFilter('initial', -1)"
            >热门</span
          >
          <template v-for="item in filters" :key="item.value">
            <span
              class="tag_item"
              :class="{ 'is-active': item === initial }"
              @click="changeFilter('initial', item)"
              >{{ item }}</span
            >
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.tags_container {
  font-size: 14px;
  .tags_box {
    padding: 10px 0;
  }
  .tags_box,
  .tag_items {
    display: flex;
    flex-wrap: wrap;
    flex: 1;
    font-weight: bold;
  }
  .tag_items {
    align-items: center;
  }
  .tag_title {
    margin-right: 10px;
    padding: 4px 0;
    color: var(--music-link-hover-color);
  }
  .tag_item {
    position: relative;
    font-size: 14px;
    color: var(--music-link-color);
    min-width: 48px;
    text-align: center;
    padding: 4px 10px;
    margin: 0 20px;
    border-radius: 30px;
    cursor: pointer;
    &:hover {
      color: var(--music-link-hover-color);
    }
  }

  .tag_item::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 10px;
    border-right: 1px solid var(--music-color-4);
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
  }
  .tag_item:nth-child(11n + 1)::after {
    content: '';
    border-right: none;
  }
  .tag_item.is-active {
    color: var(--music-base-color);
    background-color: var(--music-base-color-light);
  }
}
</style>
